import React, { Component } from 'react'

export default class Count extends Component {
  state = {
    count: 0
  }
  add = () => {
    const { value } = this.selectVal
    const { count } = this.state
    this.setState({
      count: count + value * 1
    })
   }
  sub = () => { 
    const { value } = this.selectVal
    const { count } = this.state
    this.setState({
      count: count - value * 1
    })
  }
  incrementWherOdd = () => { 
    const { value } = this.selectVal
    const { count } = this.state
    if (count % 2 !== 0) {
      this.setState({
        count: count + value * 1
      })
    }
  }
  incrementAfter1s = () => { 
    const { value } = this.selectVal
    const { count } = this.state
    setTimeout(() => {
      this.setState({
        count: count + value * 1
      })

    }, 1000);
     
  }
  render() {
    const { count } = this.state
    return (
      <div>
        <div className="header">计算之后的合为：{ count }</div>
        <div className="opt">
          <select ref = { val => this.selectVal = val }>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
          </select>
          <button onClick={this.add}>+1</button>
          <button onClick={this.sub}>-1</button>
          <button onClick={this.incrementWherOdd}>count为奇数的时候加</button>
          <button onClick={this.incrementAfter1s}>1秒之后加</button>
        </div>
      </div>
    )
  }
}
